<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input :placeholder="$t('请输入搜索公司名称')" v-model="listQuery.keyword" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter"/>
      <el-select v-model="listQuery.status" :placeholder="$t('请选择审核状态')" clearable class="filter-item"
                 style="width: 160px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name"
                   :value="item.key"/>
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{
        $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="ResetSearch">{{
        $t('重置') }}
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange">
      <el-table-column label="服务商id" prop="service_id" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.service_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务对象" prop="service_object" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.service_object==1?'进口商':(scope.row.service_object==2?'出口商':'其他')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务区域" prop="service_region" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.service_region==1?'国内':'国外' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司名称" prop="company_name" align="center"
                       width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.company_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司名称(英文)" prop="company_name_us" align="center"
                       width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.company_name_us}}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" prop="service_info_status" align="center"
                       width="180">
        <template slot-scope="scope">
          <span>{{(scope.row.service_info_status==0)?'待审核':((scope.row.service_info_status==1||scope.row.service_info_status==5)?'审核通过':'审核拒绝')}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click.native.prevent="showArticle(scope.row)">预览服务商信息
          </el-button>

            <el-button v-show="scope.row.service_info_status==0"
              size="mini"
              @click.native.prevent="showExamineRefuse(scope.row)">审核拒绝
            </el-button>
            <el-button v-show="scope.row.service_info_status==0"
              size="mini"
              type="success"
              @click.native.prevent="examinePass(scope.row)">审核通过
            </el-button>


        </template>
      </el-table-column>
      >
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="getList"/>
    <el-dialog
      title="审核拒绝原因"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="60px" class="demo-dynamic">
        请选择拒绝步骤数:
        <el-select v-model="dynamicValidateForm.refuse_step" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          :label="'问题' + (index +1)"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          :rules="{required: true, message: '拒绝原因不能为空', trigger: 'blur'}">
          <el-input v-model="domain.value"></el-input>
          <el-button @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="addDomain">新增拒绝原因</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
 <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="examineRefuse">确 定</el-button>
</span>
    </el-dialog>
    <el-dialog
      title="服务商基本信息预览"
      :visible.sync="articleVisible"
      width="50%"
      :before-close="handleClose">
      <div>
        <template>
          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
            <el-tab-pane label="公司基本信息" name="first">
              <div class="show_title"><span>公司名称 : </span><span >{{ShowServiceInfo.company_name}}</span></div>
              <div class="show_title"><span>公司名称(英文) :</span><span >{{ShowServiceInfo.company_name_us}}</span></div>
              <div class="show_title"><span>服务类型 : </span><span >{{showServiceType}}</span></div>
              <div class="show_title"><span>服务区域 : </span><span >{{ShowServiceInfo.service_region==1?'国内':'国外'}}</span></div>
              <div class="show_title"><span>服务对象 : </span><span >{{ShowServiceInfo.service_object==1?'进口商':(ShowServiceInfo.service_object==2?'出口商':'其他')}}</span>
              </div>
              <div class="show_title" ><span>公司注册地 : </span><span>{{ShowServiceInfo.business_license_location}}</span></div>
              <div class="show_title" ><span>公司注册地(英文) : </span><span>{{ShowServiceInfo.business_license_location}}</span></div>
              <div class="show_title" ><span>公司地址 : </span><span>{{ShowServiceInfo.company_address_detail}}</span></div>
              <div class="show_title" ><span>公司地址(英文) : </span><span>{{ShowServiceInfo.company_address_detail_us}}</span></div>
              <div class="show_title" ><span>公司联系人 : </span><span>{{ShowServiceInfo.company_contacts}}</span></div>
              <div class="show_title" ><span>公司联系人(英文) : </span>{{ShowServiceInfo.company_contacts_us}}<span></span></div>
              <div class="show_title" ><span>客服电话 : </span><span>{{ShowServiceInfo.customer_mobile}}</span></div>
              <div class="show_title" ><span>法定代表 : </span><span>{{ShowServiceInfo.legal_person}}</span></div>
              <div class="show_title" ><span>公司介绍 : </span><span>{{ShowServiceInfo.company_introduce_en}}</span></div>
              <div class="show_title" ><span>公司介绍(英) : </span><span>{{ShowServiceInfo.company_introduce_us}}</span></div>
            </el-tab-pane>
            <el-tab-pane label="认证信息" name="second">
              <div>
                <div>
                  <h2>公司资质认证</h2>
                  <ul v-if="ShowServiceInfo.is_three_card===0">
                    <li>
                      <div><span>*</span>营业执照</div>
                      <div><img :src="ShowServiceInfo.business_license_electronic" alt="营业执照"></div>
                      <div>证书有效期 <span v-if="ShowServiceInfo.license_electronic_islong=='0'">{{ShowServiceInfo.license_electronic_starttime}} - {{ShowServiceInfo.license_electronic_endtime}}</span><span
                        v-if="ShowServiceInfo.license_electronic_islong=='1'">长期有效</span></div>
                    </li>
                    <li>
                      <div><span>*</span>组织机构代码证</div>
                      <div><img :src="ShowServiceInfo.business_organization_electronic" alt="组织机构代码证"></div>
                      <div>证书有效期 <span v-if="ShowServiceInfo.organization_electronic_islong=='0'">{{ShowServiceInfo.organization_electronic_starttime}} - {{ShowServiceInfo.organization_electronic_endtime}}</span><span
                        v-if="ShowServiceInfo.organization_electronic_islong=='1'">长期有效</span></div>
                    </li>
                    <li>
                      <div><span>*</span>税务登记证</div>
                      <div><img :src="ShowServiceInfo.tax_registration" alt="税务登记证"></div>
                      <div>证书有效期 <span v-if="ShowServiceInfo.tax_registration_islong=='0'">{{ShowServiceInfo.tax_registration_starttime}} - {{ShowServiceInfo.tax_registration_endtime}}</span><span
                        v-if="ShowServiceInfo.tax_registration_islong=='1'">长期有效</span></div>
                    </li>
                    <li v-show="">
                      <div><span>*</span>其他证明材料</div>
                      <div><img src="" alt="其他证明材料"></div>
                      <div>证书有效期</div>
                    </li>
                  </ul>
                  <ul v-else="ShowServiceInfo.is_three_card">
                    <li>
                      <div><span>*</span>三证合一</div>
                      <div><img :src="ShowServiceInfo.three_card_image" alt="三证合一"></div>
                      <div>证书有效期<span v-if="ShowServiceInfo.three_card_islong=='0'">{{ShowServiceInfo.three_card_starttime}} - {{ShowServiceInfo.three_card_endtime}}</span><span
                        v-if="ShowServiceInfo.three_card_islong=='1'">长期有效</span></div>
                    </li>
                    <li v-show="ShowServiceInfo.other_prove">
                      <div><span>*</span>其他证明材料</div>
                      <div><img :src="ShowServiceInfo.other_prove" alt="其他证明材料"></div>
                      <div>证书有效期
                        <span  v-if="ShowServiceInfo.other_prove_islong=='0'">{{ShowServiceInfo.other_prove_starttime}} -
                        {{ShowServiceInfo.other_prove_endtime}}</span><span
                          v-if="ShowServiceInfo.other_prove_islong=='1'">长期有效</span></div>
                    </li>
                  </ul>
                </div>
                <div>
                  <h2>对公账户信息</h2>
                  <ul>
                    <li>
                      <div>开户名称</div>
                      <div>{{ShowServiceInfo.bank_account_name}}</div>
                    </li>
                    <li>
                      <div>开户银行</div>
                      <div>{{ShowServiceInfo.bank_name}}</div>
                    </li>
                    <li>
                      <div>银行账号</div>
                      <div >{{ShowServiceInfo.bank_account_number}}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>

      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="articleVisible = false">取 消</el-button>
    <el-button type="primary" @click="articleVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {fetchList, ExamineService, getOneServiceDetail, getServiceType} from '@/api/Service'
  import waves from '@/directive/waves' // Waves directive
  import {parseTime} from '@/utils'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  const calendarTypeOptions = [
    {key: '0', display_name: '待审核'},
    {key: '1', display_name: '审核通过'},
    {key: '2', display_name: '审核拒绝'},
  ]
  // arr to obj ,such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  export default {
    name: 'ComplexTable',
    components: {Pagination},
    directives: {waves},
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    data() {
      return {
        activeName2: 'first',
        ExamineService_id: '',
        tableKey: 0,
        ExamineRefuseData: {
          domains: {},
          refuse_step: '',
        },
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          refuse_step: '',
        },
        _service_object: [
          {key: '1', display_name: '进口商'},
          {key: '2', display_name: '出口商'},
          {key: '3', display_name: '其他'},
        ],
        _service_region: [
          {key: '1', display_name: '国内'},
          {key: '2', display_name: '国外'},
        ],
        options: [
          {
            value: '2',
            label: '步骤二(基本信息)'
          }, {
            value: '3',
            label: '步骤三(证明信息)'
          }],
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: undefined,
          importance: undefined,
          keyword: undefined,
          status: undefined,
          service_region: '',
          service_object: '',
        },
        importanceOptions: [1, 2, 3],
        calendarTypeOptions,
        showReviewer: false,
        temp: {
          id: undefined,
          importance: 1,
          remark: '',
          timestamp: new Date(),
          title: '',
          type: '',
          status: 'published'
        },
        rules: {
          type: [{required: true, message: 'type is required', trigger: 'change'}],
          timestamp: [{type: 'date', required: true, message: 'timestamp is required', trigger: 'change'}],
          title: [{required: true, message: 'title is required', trigger: 'blur'}]
        },
        downloadLoading: false,
        dialogVisible: false,
        articleVisible: false,
        articleVisibleProve: false,
        ShowService_id: null,
        showServiceType: null,
        ShowServiceInfo: {
          abbreviation: "",
          bank_account_name: "",
          bank_account_number: "",
          bank_name: "",
          business_license_electronic: "",
          business_license_location: "",
          business_organization_electronic: "",
          company_address_detail: "",
          company_address_detail_us: "",
          company_area_id: 0,
          company_city_id: 0,
          company_contacts: "",
          company_contacts_us: "",
          company_introduce_en: "",
          company_introduce_us: "",
          company_name: "",
          company_name_us: "",
          company_phone: "",
          company_province_id: 0,
          company_register_area_id: 0,
          company_register_city_id: 0,
          company_register_province_id: 0,
          contacts_phone: "",
          create_time: 0,
          is_three_card: 0,
          legal_person: "",
          license_electronic_endtime: "",
          license_electronic_islong: 0,
          license_electronic_starttime: "",
          organization_electronic_endtime: "",
          organization_electronic_starttime: "",
          other_prove: "",
          other_prove_endtime: "",
          other_prove_islong: 0,
          other_prove_starttime: "",
          service_city_id: 0,
          service_id: "1",
          service_object: 1,
          service_province_id: 0,
          service_region: 1,
          tax_registration: "",
          tax_registration_endtime: "",
          tax_registration_islong: 0,
          tax_registration_starttime: "",
          three_card_endtime: "",
          three_card_image: "",
          three_card_islong: 0,
          three_card_starttime: "",
          service_types: "",
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getList() {
        this.listLoading = true
        console.log('=====')
        console.log(this.listQuery)
        fetchList({
          page: this.listQuery.page,
          status: this.listQuery.status,
          keyword: this.listQuery.keyword,
          limit: this.listQuery.limit
        }).then(response => {
          this.list = response.data.data.data
          this.total = response.data.data.total
          // this.listQuery.limit = response.data.data.per_page
          setTimeout(() => {
            this.listLoading = false
          }, 1.0 * 1000)
        })
      },
      showArticle(row) {
        this.articleVisible = true
        this.ShowService_id = row.service_id
        console.log('获取证明信息')
        console.log(this.ShowService_id)
        getOneServiceDetail({
          service_id: this.ShowService_id,
        }).then(response => {
          if (response.status == 200) {
            this.ShowServiceInfo = response.data.data
            this.getServiceType()
          }
        })
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      ResetSearch() {
        this.listQuery.status = undefined
        this.listQuery.keyword = undefined
        this.getList()
      },
      showExamineRefuse(row) {
        this.dialogVisible = true
        this.ExamineService_id = row.service_id
      },
      examineRefuse() {
        if (this.dynamicValidateForm.domains.length < 1 || this.dynamicValidateForm.domains[0].value.length < 1) {
          this.$notify.error({
            title: '错误',
            message: '审核拒绝原因以及失败步骤数不能为空!'
          });
        } else {
          ExamineService({
            service_id: this.ExamineService_id,
            service_info_status: 2,
            error_message: this.dynamicValidateForm.domains,
            refuse_step: this.dynamicValidateForm.refuse_step
          }).then(response => {
            if (response.status == 200) {
              this.dialogVisible = false
              this.getList()
            }
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
          })
        }
      },
      examinePass(row) {
        ExamineService({service_id: row.service_id, service_info_status: 1}).then(response => {
          if (response.status == 200) {
            this.getList()
          }
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        console.log(row.dynamic_id)
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.status = status
      },
      getServiceType() {
        getServiceType().then(response => {
          if (response.status === 200) {
            this.ServiceType = response.data.data
            this.showServiceType = ''
            for (let i = 0; i < this.ServiceType.length ; i++) {
              for (let j = 0; j < this.ShowServiceInfo.service_types.length ; j++) {
                if (this.ServiceType[i].service_type_id == this.ShowServiceInfo.service_types[j]) {
                  this.showServiceType += this.ServiceType[i].service_type_name + ','
                }
              }
            }
          this.showServiceType = this.showServiceType.slice(0, -1)
            console.log('0000=====0000')
            console.log(this.showServiceType)
          }
        })
        console.log('=====0000')
        console.log(this.showServiceType)
      },
      sortChange(data) {
        const {prop, order} = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.listQuery.sort = '+id'
        } else {
          this.listQuery.sort = '-id'
        }
        this.handleFilter()
      },
      handleClose(done) {
        this.dialogVisible = false
        this.articleVisible = false
        this.articleVisibleProve = false
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  .show_title{
    line-height: 30px;
    font-size: 18px;
  }
</style>
